<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
      class="general-card"
      :header-style="{ paddingBottom: 0 }"
      :body-style="{
        paddingTop: '20px',
      }"
      :title="$t('菜品热搜榜')"
    >
      <!-- Next is form which is the Top.20.most.popular.questions.-->
      <a-table :columns="columns" :data="data" />
    </a-card>
  </a-spin>
</template>

<script lang="ts">
import { ref, reactive, onMounted } from 'vue';
import useLoading from '@/hooks/loading';
import useChartOption from '@/hooks/chart-option';
import { AnyObject } from '@/types/global';
import axios from 'axios';

// 定义 commendAll 函数
export function commendAll() {
  return axios.get('/dish/commendAll/');
}

export default {
  setup() {
    const columns = [
      {
        title: 'id',
        dataIndex: 'dishId',
      },
      {
        title: '菜品',
        dataIndex: 'dishName',
      },
      {
        title: '图片链接',
        dataIndex: 'dishPicture', // 这里 dataIndex 可能有误，需要确认是否是阅读量字段
      },
      {
        title: '点赞量',
        dataIndex: 'dishDianzan',
      },
    ];

    const data = reactive([]);

    const { loading, setLoading } = useLoading(true);
    const xAxis = ref<string[]>([]);
    const chartsData = ref<number[]>([]);
    const graphicElements = ref([
      graphicFactory({ left: '2.6%' }),
      graphicFactory({ right: 0 }),
    ]);

    const { chartOption } = useChartOption(() => {
      return {
        // 图表配置...
      };
    });

    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await commendAll();
        console.log(res);
        data.length = 0; // 清空原数据
        data.push(...res.data.data); // 填充新数据
      } catch (error) {
        console.error('数据获取失败:', error);
        message.error('数据获取失败，请稍后重试'); // 显示错误提示
      } finally {
        setLoading(false);
      }
    };

    onMounted(() => {
      fetchData();
    });

    function graphicFactory(side: AnyObject) {
      return {
        type: 'text',
        bottom: '8',
        ...side,
        style: {
          text: '',
          textAlign: 'center',
          fill: '#4E5969',
          fontSize: 12,
        },
      };
    }

    return {
      columns,
      data,
      loading,
      chartOption,
    };
  },
};
</script>

<style scoped lang="less"></style>